<%
  aml_doc = Routes.website_path(@conn, :doc, ["aml"])
  aml_npm = Azimutt.config(:npm_aml_url)
  aml_vscode = Azimutt.config(:vscode_extension_url)
  aml_converter = Routes.website_path(@conn, :converter, "aml")
  aml_azimutt = Routes.elm_path(@conn, :create)
  # cli_convert = "https://github.com/azimuttapp/azimutt/blob/main/cli/README.md#convert"
%>
<div class="relative isolate overflow-hidden bg-gradient-to-b from-indigo-100/20 pt-10 pb-24">
    <div class="mx-auto max-w-7xl lg:grid lg:grid-cols-2 lg:gap-x-8 lg:px-8">
        <div class="px-6 lg:px-0 lg:pt-4">
            <div class="mx-auto max-w-2xl">
                <div class="max-w-lg">
                    <img class="h-32" src={Routes.static_path(@conn, "/images/logos/aml.png")} alt="AML by Azimutt" />
                    <h1 class="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">The easiest DSL for database schemas</h1>
                    <p class="mt-6 text-lg leading-8 text-gray-600">
                        If you ever designed a database schema on a whiteboard,<br>
                        AML is made for you ❤️. It's <b>fast to learn and write</b>, and can be translated to other dialects.
                    </p>
                    <div class="mt-10 flex items-center gap-x-6">
                        <a href={aml_doc} class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Documentation</a>
                        <a href={aml_npm} target="_blank" rel="noopener noreferrer" class="text-sm font-semibold leading-6 text-gray-900">Get on npm <span aria-hidden="true">→</span></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-20 sm:mt-24 md:mx-auto md:max-w-2xl lg:mx-0 lg:mt-0 lg:w-screen">
            <div class="absolute inset-y-0 right-1/2 -z-10 -mr-10 w-[200%] skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 md:-mr-20 lg:-mr-36" aria-hidden="true"></div>
            <div class="shadow-lg md:rounded-3xl">
                <div class="bg-indigo-500 [clip-path:inset(0)] md:[clip-path:inset(0_round_theme(borderRadius.3xl))]">
                    <div class="absolute -inset-y-px left-1/2 -z-10 ml-10 w-[200%] skew-x-[-30deg] bg-indigo-100 opacity-20 ring-1 ring-inset ring-white md:ml-20 lg:ml-36" aria-hidden="true"></div>
                    <div class="relative px-6 pt-8 sm:pt-16 md:pl-16 md:pr-0">
                        <div class="mx-auto max-w-2xl md:mx-0 md:max-w-none">
                            <div x-data="{lang: 'aml'}" class="w-screen overflow-hidden rounded-tl-xl bg-gray-900">
                                <div class="flex bg-gray-800/40 ring-1 ring-white/5">
                                    <div class="-mb-px flex text-sm font-medium leading-6 text-gray-400">
                                        <div @click="lang = 'aml'" :class="{'border-r-white/10 border-b border-b-white/20 bg-white/5 text-white': lang == 'aml'}" class="px-4 py-2 border-r border-gray-600/10 select-none cursor-pointer">blog.md</div>
                                        <div @click="lang = 'sql'" :class="{'border-r-white/10 border-b border-b-white/20 bg-white/5 text-white': lang == 'sql'}" class="px-4 py-2 border-r border-gray-600/10 select-none cursor-pointer">blog.sql</div>
                                        <div @click="lang = 'json'" :class="{'border-r-white/10 border-b border-b-white/20 bg-white/5 text-white': lang == 'json'}" class="px-4 py-2 border-r border-gray-600/10 select-none cursor-pointer">blog.json</div>
                                    </div>
                                </div>
                                <div class="px-6 pb-14 pt-6">
                                    <pre :class="{'hidden': lang != 'aml'}" class="text-[0.8125rem] leading-6 text-gray-300" style="tab-size: 2"><code class="hljs aml"># sample AML

users
  id uuid pk
  name varchar
  email varchar unique
  role user_role(admin, guest)=guest

posts
  id uuid pk
  title varchar
  content text | in markdown
  created_at timestamp=`now()`
  created_by uuid -> users(id) # inline relation</code></pre>
                                    <pre :class="{'hidden': lang != 'sql'}" class="text-[0.8125rem] leading-6 text-gray-300 hidden" style="tab-size: 2"><code class="hljs sql">CREATE TABLE users (
    id UUID PRIMARY KEY,
    name VARCHAR,
    email VARCHAR UNIQUE,
    role VARCHAR DEFAULT 'guest' CHECK (role IN ('admin', 'guest'))
);

CREATE TABLE posts (
   id UUID PRIMARY KEY,
   title VARCHAR,
   content TEXT,
   created_at TIMESTAMP DEFAULT now(),
   created_by UUID REFERENCES users(id) -- inline relation
);
COMMENT ON COLUMN posts.content IS 'in markdown';</code></pre>
                                    <pre :class="{'hidden': lang != 'json'}" class="text-[0.8125rem] leading-6 text-gray-300 hidden" style="tab-size: 2"><code class="hljs js">{
  entities: [
    {
      name: 'users',
      attrs: [
        {name: 'id', type: 'uuid'},
        {name: 'name', type: 'varchar'},
        {name: 'email', type: 'varchar'},
        {name: 'role', type: 'user_role', default: 'guest'}
      ],
      pk: {attrs: [['id']]},
      indexes: [{attrs: [['email']], unique: true}]
    },
    {
      name: 'posts',
      attrs: [
        {name: 'id', type: 'uuid'},
        {name: 'title', type: 'varchar'},
        {name: 'content', type: 'text', doc: 'in markdown'},
        {name: 'created_at', type: 'timestamp', default: '`now()`'},
        {name: 'created_by', type: 'uuid'}
      ],
      pk: {attrs: [['id']]},
    }
  ],
  relations: [{
    src: {entity: 'posts'},
    ref: {entity: 'users'},
    attrs: [{src: ['created_by'], ref: ['id']}]
  }]
}</code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="pointer-events-none absolute inset-0 ring-1 ring-inset ring-black/10 md:rounded-3xl" aria-hidden="true"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="absolute inset-x-0 top-0 -z-10 h-24 bg-gradient-to-b from-white sm:h-32"></div>
    <div class="absolute inset-x-0 bottom-0 -z-10 h-24 bg-gradient-to-t from-white sm:h-32"></div>
</div>
<div class="py-24">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:text-center">
            <h2 class="text-base font-semibold leading-7 text-indigo-600">Available in all flavors</h2>
            <p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Use AML as you like</p>
        </div>
        <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
            <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2">
                <div class="flex flex-col">
                    <dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900">
                        <Icon.command_line kind="outline" class="h-5 w-5 flex-none text-indigo-600" />
                        In Visual Studio Code
                    </dt>
                    <dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
                        <p class="flex-auto">VS Code extension providing syntax highlighting, inline errors, smart suggestions, symbol rename and even conversions to SQL, JSON, DOT, Mermaid and more...</p>
                        <p class="mt-6">
                            <a href={aml_vscode} target="_blank" rel="noopener noreferrer" class="text-sm font-semibold leading-6 text-indigo-600">Get extension <span aria-hidden="true">→</span></a>
                        </p>
                    </dd>
                </div>
                <div class="flex flex-col">
                    <dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900">
                        <Icon.squares_2_2 kind="outline" class="h-5 w-5 flex-none text-indigo-600" />
                        In Azimutt
                    </dt>
                    <dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
                        <p class="flex-auto">If you are designing your database schema, this is the best option to write AML fast and see your schema in a visual way (needs paid plan, use free trial 😉).</p>
                        <p class="mt-6">
                            <a href={aml_azimutt} target="_blank" rel="noopener noreferrer" class="text-sm font-semibold leading-6 text-indigo-600">Use Azimutt design <span aria-hidden="true">→</span></a>
                        </p>
                    </dd>
                </div>
                <div class="flex flex-col">
                    <dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900">
                        <Icon.arrow_path kind="outline" class="h-5 w-5 flex-none text-indigo-600" />
                        With converters
                    </dt>
                    <dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
                        <p class="flex-auto">Azimutt offers free converters from/to many formats: AML, SQL, JSON, DBML, Mermaid and more. Use our converters to quickly get what you need.</p>
                        <p class="mt-6">
                            <a href={aml_converter} class="text-sm font-semibold leading-6 text-indigo-600">Use converters <span aria-hidden="true">→</span></a>
                        </p>
                    </dd>
                </div>
                <div class="flex flex-col">
                    <dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900">
                        <Icon.code_bracket kind="outline" class="h-5 w-5 flex-none text-indigo-600" />
                        As a library
                    </dt>
                    <dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
                        <p class="flex-auto">Integrate AML in your own projects, include it as a dependency and start parsing/generating it easily. Feel free to contribute if you like 🙏</p>
                        <p class="mt-6">
                            <a href={aml_npm} target="_blank" rel="noopener noreferrer" class="text-sm font-semibold leading-6 text-indigo-600">Get on npm <span aria-hidden="true">→</span></a>
                        </p>
                    </dd>
                </div>
            </dl>
        </div>
    </div>
</div>
<div class="py-24">
    <div class="mx-auto max-w-2xl text-center">
        <h2 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Try it live</h2>
        <p class="mt-6 text-lg leading-8 text-gray-600">
            Here is a playground to try it and see how it's converted in JSON.
            As a reminder, here is the <a href={aml_doc} target="_blank" rel="noopener noreferrer" class="underline">AML documentation</a>, but try it on your own first 😉
        </p>
    </div>
    <div class="mt-10 mx-auto flex flex-col md:flex-row space-y-8 md:space-y-0 md:space-x-8 justify-center w-full max-w-7xl">
        <div id="monaco-editor-left" class="relative w-full md:w-1/2 h-96 border border-gray-300 rounded-lg overflow-hidden"></div>
        <div id="monaco-editor-right" class="relative w-full md:w-1/2 h-96 border border-gray-300 rounded-lg overflow-hidden"></div>
    </div>
    <%= render "converters/_editors-script.html", left: %{id: "monaco-editor-left", lang: "aml"}, right: %{id: "monaco-editor-right", lang: "json"} %>
</div>

<div class="py-24">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl sm:text-center">
            <h2 class="text-base font-semibold leading-7 text-indigo-600">So nice 😍</h2>
            <p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Live design in Azimutt 👇️</p>
        </div>
    </div>
    <div class="relative overflow-hidden pt-16">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <img src={Routes.static_path(@conn, "/images/screenshots/aml2.png")} alt="AML in Azimutt" class="mb-[-12%] rounded-xl shadow-2xl ring-1 ring-gray-900/10" width="1600" height="900">
            <div class="relative" aria-hidden="true">
                <div class="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-white pt-[7%]"></div>
            </div>
        </div>
    </div>
</div>

<%= render "_footer.html", conn: @conn %>
